<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中山大学刷题平台 - 排行榜</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-blue': '#045525',        // 校色主蓝
                        'sysu-lightBlue': '#E6EDF7',   // 浅蓝辅助色
                        'sysu-gray': '#F7F9FC',        // 浅灰背景色
                        'sysu-yellow': '#FFD700',      // 竞赛主题色
                        'sysu-green': '#045525',       // 题库主题色
                    }
                }
            }
        }
    </script>
    <!-- 自定义工具类与基础样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .btn-sysu {
                @apply bg-sysu-blue text-white px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors;
            }
            .btn-sysu-outline {
                @apply border border-sysu-blue text-sysu-blue px-4 py-2 rounded-lg hover:bg-sysu-lightBlue transition-colors;
            }
            .card-hover {
                @apply hover:shadow-md transition-shadow duration-300;
            }
            .rank-item {
                @apply flex items-center p-4 border-b border-gray-100 hover:bg-sysu-lightBlue/50 transition-colors;
            }
            .rank-tab {
                @apply px-4 py-2 text-center cursor-pointer transition-colors;
            }
            .rank-tab-active {
                @apply text-sysu-blue font-medium border-b-2 border-sysu-blue;
            }
        }
    </style>
</head>
<body class="bg-gray-50 opacity-0" id="body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 shadow-sm transform translate-y-[-20px] opacity-0" id="header">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-blue text-white rounded-lg flex items-center justify-center mr-3">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-blue">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航（桌面端） -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">竞赛</a>
                    <a href="/ranking" class="text-sysu-blue font-medium border-b-2 border-sysu-blue py-5">排行榜</a>
                    <a href="/resources" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden sm:block">
                        <input type="text" placeholder="搜索排名"
                               class="pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm w-40 lg:w-56">
                        <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                    </div>

                    <!-- 用户区域容器（初始为空，由JS动态填充） -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <script>
                    // 页面加载完成后检查登录状态
                    document.addEventListener('DOMContentLoaded', function() {
                        checkLoginStatus();
                        initSmoothEffects();
                    });

                    // 检查登录状态的AJAX请求
                    async function checkLoginStatus() {
                        const container = document.getElementById('user-area-container');
                        const loadingIndicator = document.getElementById('loading-indicator');

                        try {
                            const token = localStorage.getItem('token');
                            // 发送请求到后端验证接口
                            const response = await fetch('/api/check_login', {
                                method: 'GET',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            });

                            if (!response.ok) {
                                throw new Error('验证请求失败');
                            }

                            const data = await response.json();

                            // 根据返回的登录状态渲染不同内容
                            if (data.is_logged_in) {
                                console.log(data.avatar);
                                renderLoggedInView(container, data || {});
                            } else {
                                renderLoggedOutView(container);
                            }
                        } catch (error) {
                            console.error('登录状态验证出错:', error);
                            // 出错时默认显示登录/注册按钮
                            renderLoggedOutView(container);
                        } finally {
                            // 隐藏加载指示器
                            if (loadingIndicator) {
                                loadingIndicator.remove();
                            }
                        }
                    }

                    // 渲染已登录视图
                    function renderLoggedInView(container, userData) {
                        container.innerHTML = `
                            <div class="relative" id="userDropdown">
                                <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                                    <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                                         alt="${userData.username || '用户头像'}"
                                         class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-blue transition-colors">
                                    <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                                </button>
                                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50" id="dropdownMenu">
                                    <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">个人中心</a>
                                    <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">学习进度</a>
                                    <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors" onclick="logout()">退出登录</a>
                                </div>
                            </div>
                        `;

                        // 绑定下拉菜单事件
                        bindDropdownEvents();
                    }

                    // 退出登录
                    function logout() {
                        try {
                            const token = localStorage.getItem('token');
                            // 发送退出登录请求到后端
                            fetch('/api/v1/logout', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            }).then(() => {
                                // 清除本地存储中的token
                                localStorage.removeItem('token');
                                // 刷新页面或跳转到登录页
                                window.location.href = '/';
                            });
                        }
                        catch (error) {
                            console.error('退出登录出错:', error);
                        }
                    }

                    // 渲染未登录视图
                    function renderLoggedOutView(container) {
                        container.innerHTML = `
                            <div class="flex items-center space-x-3">
                                <a href="/login" class="text-gray-600 hover:text-sysu-blue transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    登录
                                </a>
                                <a href="/register" class="bg-sysu-blue text-white hover:bg-sysu-blue/90 transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    注册
                                </a>
                            </div>
                        `;
                    }

                    // 绑定下拉菜单交互事件
                    function bindDropdownEvents() {
                        const dropdownTrigger = document.getElementById('dropdownTrigger');
                        const dropdownMenu = document.getElementById('dropdownMenu');
                        const dropdownIcon = document.getElementById('dropdownIcon');
                        const userDropdown = document.getElementById('userDropdown');

                        if (!dropdownTrigger || !dropdownMenu || !dropdownIcon) return;

                        // 点击头像按钮切换下拉菜单显示状态
                        dropdownTrigger.addEventListener('click', (e) => {
                            e.stopPropagation();
                            dropdownMenu.classList.toggle('hidden');
                            dropdownIcon.classList.toggle('rotate-180');
                        });

                        // 点击页面其他区域关闭下拉菜单
                        document.addEventListener('click', () => {
                            if (!dropdownMenu.classList.contains('hidden')) {
                                dropdownMenu.classList.add('hidden');
                                dropdownIcon.classList.remove('rotate-180');
                            }
                        });

                        // 点击下拉菜单内部不关闭
                        dropdownMenu.addEventListener('click', (e) => {
                            e.stopPropagation();
                        });

                        // 鼠标离开整个下拉区域时关闭
                        userDropdown.addEventListener('mouseleave', () => {
                            setTimeout(() => {
                                if (!dropdownMenu.matches(':hover') && !dropdownTrigger.matches(':hover')) {
                                    dropdownMenu.classList.add('hidden');
                                    dropdownIcon.classList.remove('rotate-180');
                                }
                            }, 300);
                        });
                    }

                    // 初始化平滑效果
                    function initSmoothEffects() {
                        // 导航栏显示动画
                        setTimeout(() => {
                            document.getElementById('navbar').classList.add('visible');
                        }, 100);

                        // 移动端菜单按钮事件
                        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
                        const mobileMenu = document.getElementById('mobile-menu');

                        if (mobileMenuBtn && mobileMenu) {
                            mobileMenuBtn.addEventListener('click', () => {
                                mobileMenu.classList.toggle('hidden');
                                // 添加菜单切换动画
                                if (!mobileMenu.classList.contains('hidden')) {
                                    mobileMenu.style.maxHeight = '0';
                                    mobileMenu.style.overflow = 'hidden';
                                    mobileMenu.style.transition = 'max-height 0.3s ease-out';
                                    setTimeout(() => {
                                        mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
                                    }, 10);
                                } else {
                                    mobileMenu.style.maxHeight = '0';
                                }
                            });
                        }

                        // 设置滚动显示动画
                        setupScrollAnimation();
                    }

                    // 设置滚动显示动画
                    function setupScrollAnimation() {
                        const fadeElements = document.querySelectorAll('.fade-in');

                        // 初始检查可见元素
                        checkFadeElements(fadeElements);

                        // 滚动时检查可见元素
                        window.addEventListener('scroll', () => {
                            checkFadeElements(fadeElements);
                        });
                    }

                    // 检查并显示进入视口的元素
                    function checkFadeElements(elements) {
                        elements.forEach((element, index) => {
                            const rect = element.getBoundingClientRect();
                            const windowHeight = window.innerHeight || document.documentElement.clientHeight;

                            // 元素进入视口
                            if (!element.classList.contains('visible')) {
                                // 依次显示，添加延迟效果
                                setTimeout(() => {
                                    element.classList.add('visible');
                                }, index * 200);
                            }
                        });
                    }
                    </script>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden p-2 text-gray-600 hover:text-sysu-blue" id="mobile-menu-btn">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动端导航（默认隐藏） -->
        <div class="md:hidden hidden pb-4" id="mobile-menu">
            <div class="flex items-center relative mb-4 mx-2">
                <input type="text" placeholder="搜索排名"
                       class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm">
                <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
            </div>
            <nav class="flex flex-col space-y-2 mx-2">
                <a href="/" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">首页</a>
                <a href="/questions" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">题库</a>
                <a href="/contests" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">竞赛</a>
                <a href="/ranking" class="text-sysu-blue px-2 py-2 bg-sysu-lightBlue rounded font-medium">排行榜</a>
                <a href="/resources" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">学习资源</a>
            </nav>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 页面标题与控制区 -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4 opacity-0 transform translate-y-[20px]" id="page-title">
            <div>
                <h2 class="text-2xl font-bold text-gray-800">排行榜</h2>
                <p class="text-gray-500 mt-1">查看竞赛排名、题目热度及资源热度</p>
            </div>

            <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                <div class="relative">
                    <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:border-sysu-blue text-sm">
                        <option>全部时间</option>
                        <option>本周</option>
                        <option>本月</option>
                        <option>本学期</option>
                        <option>全部</option>
                    </select>
                    <i class="fa fa-chevron-down absolute right-3 top-2.5 text-gray-400 text-xs pointer-events-none"></i>
                </div>
            </div>
        </div>

        <!-- 排行榜标签页 -->
        <div class="border-b border-gray-200 mb-6 opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">
            <div class="flex overflow-x-auto whitespace-nowrap">
                <div class="rank-tab rank-tab-active" data-tab="contest-rank">竞赛排名</div>
                <div class="rank-tab" data-tab="question-hot">题目热度</div>
                <div class="rank-tab" data-tab="resource-hot">资源热度</div>
                <div class="rank-tab" data-tab="user-overall">总积分排名</div>
            </div>
        </div>

        <!-- 竞赛排名内容 -->
        <div class="rank-content" id="contest-rank">
            <!-- 竞赛选择器 -->
            <div class="bg-white rounded-xl p-4 mb-6 shadow-sm opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
                <div class="flex flex-wrap gap-2">
                    <button class="px-3 py-1 bg-sysu-blue text-white rounded-full text-sm">中山大学第12届程序设计竞赛</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm transition-colors">数据结构专题挑战赛</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm transition-colors">广东省高校编程联谊赛</button>
                    <button class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm transition-colors">算法入门竞赛</button>
                </div>
            </div>

            <!-- 竞赛排名列表 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                <!-- 表头 -->
                <div class="flex bg-sysu-gray px-6 py-3 font-medium text-gray-500 text-sm">
                    <div class="w-1/12">排名</div>
                    <div class="w-5/12">用户</div>
                    <div class="w-2/12 text-center">得分</div>
                    <div class="w-2/12 text-center">解题数</div>
                    <div class="w-2/12 text-center">提交次数</div>
                </div>

                <!-- 排名项 - 前三名特殊样式 -->
                <div class="rank-item opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                    <div class="w-1/12 flex justify-center">
                        <div class="w-8 h-8 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center font-bold">1</div>
                    </div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1001/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">张同学</div>
                            <div class="text-xs text-gray-500">计算机学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">500</div>
                    <div class="w-2/12 text-center">10</div>
                    <div class="w-2/12 text-center">12</div>
                </div>

                <div class="rank-item opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="450">
                    <div class="w-1/12 flex justify-center">
                        <div class="w-8 h-8 bg-gray-200 text-gray-600 rounded-full flex items-center justify-center font-bold">2</div>
                    </div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1002/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">李同学</div>
                            <div class="text-xs text-gray-500">数据科学与计算机学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">480</div>
                    <div class="w-2/12 text-center">9</div>
                    <div class="w-2/12 text-center">15</div>
                </div>

                <div class="rank-item opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                    <div class="w-1/12 flex justify-center">
                        <div class="w-8 h-8 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center font-bold">3</div>
                    </div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1003/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">王同学</div>
                            <div class="text-xs text-gray-500">信息科学与技术学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">450</div>
                    <div class="w-2/12 text-center">9</div>
                    <div class="w-2/12 text-center">18</div>
                </div>

                <!-- 普通排名项 -->
                <div class="rank-item opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="550">
                    <div class="w-1/12 flex justify-center font-medium">4</div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1004/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">赵同学</div>
                            <div class="text-xs text-gray-500">计算机学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">420</div>
                    <div class="w-2/12 text-center">8</div>
                    <div class="w-2/12 text-center">20</div>
                </div>

                <div class="rank-item opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="600">
                    <div class="w-1/12 flex justify-center font-medium">5</div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">陈同学</div>
                            <div class="text-xs text-gray-500">数据科学与计算机学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">400</div>
                    <div class="w-2/12 text-center">8</div>
                    <div class="w-2/12 text-center">16</div>
                </div>

                <div class="rank-item opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="650">
                    <div class="w-1/12 flex justify-center font-medium">6</div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1006/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">刘同学</div>
                            <div class="text-xs text-gray-500">信息科学与技术学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">380</div>
                    <div class="w-2/12 text-center">7</div>
                    <div class="w-2/12 text-center">14</div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="flex items-center justify-center mt-6 opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="700">
                <nav class="flex items-center space-x-1">
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50">上一页</a>
                    <a href="#" class="px-3 py-2 rounded-lg bg-sysu-blue text-white">1</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">2</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">3</a>
                    <span class="px-2 text-gray-500">...</span>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">10</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50">下一页</a>
                </nav>
            </div>
        </div>

        <!-- 题目热度排名 (默认隐藏) -->
        <div class="rank-content hidden" id="question-hot">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <!-- 表头 -->
                <div class="flex bg-sysu-gray px-6 py-3 font-medium text-gray-500 text-sm">
                    <div class="w-1/12">排名</div>
                    <div class="w-5/12">题目名称</div>
                    <div class="w-2/12 text-center">难度</div>
                    <div class="w-2/12 text-center">通过率</div>
                    <div class="w-2/12 text-center">提交次数</div>
                </div>

                <!-- 题目热度项 -->
                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">1</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">两数之和</a>
                        <div class="text-xs text-gray-500 mt-0.5">数组 | 哈希表</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-green-100 text-green-600 rounded-full text-xs">简单</span>
                    </div>
                    <div class="w-2/12 text-center">68.5%</div>
                    <div class="w-2/12 text-center">12543</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">2</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">二叉树的层序遍历</a>
                        <div class="text-xs text-gray-500 mt-0.5">树 | 广度优先搜索</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-600 rounded-full text-xs">中等</span>
                    </div>
                    <div class="w-2/12 text-center">54.2%</div>
                    <div class="w-2/12 text-center">9876</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">3</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">最长回文子串</a>
                        <div class="text-xs text-gray-500 mt-0.5">字符串 | 动态规划</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-600 rounded-full text-xs">中等</span>
                    </div>
                    <div class="w-2/12 text-center">42.8%</div>
                    <div class="w-2/12 text-center">8765</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">4</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">全排列</a>
                        <div class="text-xs text-gray-500 mt-0.5">回溯算法</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-600 rounded-full text-xs">中等</span>
                    </div>
                    <div class="w-2/12 text-center">51.3%</div>
                    <div class="w-2/12 text-center">7654</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">5</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">接雨水</a>
                        <div class="text-xs text-gray-500 mt-0.5">栈 | 双指针</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-red-100 text-red-600 rounded-full text-xs">困难</span>
                    </div>
                    <div class="w-2/12 text-center">32.1%</div>
                    <div class="w-2/12 text-center">6543</div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="flex items-center justify-center mt-6">
                <nav class="flex items-center space-x-1">
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50">上一页</a>
                    <a href="#" class="px-3 py-2 rounded-lg bg-sysu-blue text-white">1</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">2</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">3</a>
                    <span class="px-2 text-gray-500">...</span>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">10</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50">下一页</a>
                </nav>
            </div>
        </div>

        <!-- 资源热度排名 (默认隐藏) -->
        <div class="rank-content hidden" id="resource-hot">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <!-- 表头 -->
                <div class="flex bg-sysu-gray px-6 py-3 font-medium text-gray-500 text-sm">
                    <div class="w-1/12">排名</div>
                    <div class="w-5/12">资源名称</div>
                    <div class="w-2/12 text-center">类型</div>
                    <div class="w-2/12 text-center">难度</div>
                    <div class="w-2/12 text-center">访问量</div>
                </div>

                <!-- 资源热度项 -->
                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">1</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">算法导论（第三版）学习笔记</a>
                        <div class="text-xs text-gray-500 mt-0.5">数据结构 | 算法基础</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-600 rounded-full text-xs">文档</span>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-600 rounded-full text-xs">中等</span>
                    </div>
                    <div class="w-2/12 text-center">5432</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">2</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">动态规划入门到精通</a>
                        <div class="text-xs text-gray-500 mt-0.5">算法 | 动态规划</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-purple-100 text-purple-600 rounded-full text-xs">视频</span>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-yellow-100 text-yellow-600 rounded-full text-xs">中等</span>
                    </div>
                    <div class="w-2/12 text-center">4321</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">3</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">LeetCode高频面试题解析</a>
                        <div class="text-xs text-gray-500 mt-0.5">面试 | 算法</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-green-100 text-green-600 rounded-full text-xs">教程</span>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-green-100 text-green-600 rounded-full text-xs">简单</span>
                    </div>
                    <div class="w-2/12 text-center">3210</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">4</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">图论算法进阶</a>
                        <div class="text-xs text-gray-500 mt-0.5">算法 | 图论</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-purple-100 text-purple-600 rounded-full text-xs">视频</span>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-red-100 text-red-600 rounded-full text-xs">困难</span>
                    </div>
                    <div class="w-2/12 text-center">2109</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center font-medium">5</div>
                    <div class="w-5/12">
                        <a href="#" class="font-medium hover:text-sysu-blue transition-colors">Python数据结构实战</a>
                        <div class="text-xs text-gray-500 mt-0.5">编程语言 | Python</div>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-blue-100 text-blue-600 rounded-full text-xs">文档</span>
                    </div>
                    <div class="w-2/12 text-center">
                        <span class="px-2 py-0.5 bg-green-100 text-green-600 rounded-full text-xs">简单</span>
                    </div>
                    <div class="w-2/12 text-center">1098</div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="flex items-center justify-center mt-6">
                <nav class="flex items-center space-x-1">
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50">上一页</a>
                    <a href="#" class="px-3 py-2 rounded-lg bg-sysu-blue text-white">1</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">2</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">3</a>
                    <span class="px-2 text-gray-500">...</span>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 hover:bg-gray-50">8</a>
                    <a href="#" class="px-3 py-2 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50">下一页</a>
                </nav>
            </div>
        </div>

        <!-- 总积分排名 (默认隐藏) -->
        <div class="rank-content hidden" id="user-overall">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                <!-- 表头 -->
                <div class="flex bg-sysu-gray px-6 py-3 font-medium text-gray-500 text-sm">
                    <div class="w-1/12">排名</div>
                    <div class="w-5/12">用户</div>
                    <div class="w-2/12 text-center">总积分</div>
                    <div class="w-2/12 text-center">解题数</div>
                    <div class="w-2/12 text-center">竞赛次数</div>
                </div>

                <!-- 总积分排名项 -->
                <div class="rank-item">
                    <div class="w-1/12 flex justify-center">
                        <div class="w-8 h-8 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center font-bold">1</div>
                    </div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1011/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">张同学</div>
                            <div class="text-xs text-gray-500">计算机学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">12500</div>
                    <div class="w-2/12 text-center">320</div>
                    <div class="w-2/12 text-center">15</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center">
                        <div class="w-8 h-8 bg-gray-200 text-gray-600 rounded-full flex items-center justify-center font-bold">2</div>
                    </div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1012/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">李同学</div>
                            <div class="text-xs text-gray-500">数据科学与计算机学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">11800</div>
                    <div class="w-2/12 text-center">290</div>
                    <div class="w-2/12 text-center">12</div>
                </div>

                <div class="rank-item">
                    <div class="w-1/12 flex justify-center">
                        <div class="w-8 h-8 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center font-bold">3</div>
                    </div>
                    <div class="w-5/12 flex items-center">
                        <img src="https://picsum.photos/id/1013/40/40" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
                        <div>
                            <div class="font-medium">王同学</div>
                            <div class="text-xs text-gray-500">信息科学与技术学院</div>
                        </div>
                    </div>
                    <div class="w-2/12 text-center font-medium">10500</div>
                    <div class="w-2/12 text-center">250</div>
                    <div class="w-2/12 text-center">10</div>
                </div>
            </div>

            <!-- 活跃度图表 -->
            <div class="mt-8 bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4">用户活跃度趋势</h3>
                <div class="h-64">
                    <canvas id="activityChart"></canvas>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12 mt-12 opacity-0 transform translate-y-[20px]" id="footer">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-white text-sysu-blue rounded-lg flex items-center justify-center mr-3">
                            <i class="fa fa-graduation-cap text-xl"></i>
                        </div>
                        <h2 class="text-lg font-bold">中山大学刷题平台</h2>
                    </div>
                    <p class="text-gray-400 text-sm mt-2">助力中大学子提升编程能力</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-envelope mr-1"></i> 联系我们
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                &copy; 2023 中山大学刷题平台. 所有权利保留.
            </div>
        </div>
    </footer>

    <script>
        // 添加自定义动画
        document.head.insertAdjacentHTML('beforeend', `
            <style>
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                @keyframes slideInUp {
                    from { transform: translateY(20px); opacity: 0; }
                    to { transform: translateY(0); opacity: 1; }
                }
                @keyframes slideInLeft {
                    from { transform: translateX(-20px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                @keyframes slideInRight {
                    from { transform: translateX(20px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                .animate-fadeIn {
                    animation: fadeIn 0.5s ease-out forwards;
                }
                .animate-slideInUp {
                    animation: slideInUp 0.5s ease-out forwards;
                }
                .animate-slideInLeft {
                    animation: slideInLeft 0.5s ease-out forwards;
                }
                .animate-slideInRight {
                    animation: slideInRight 0.5s ease-out forwards;
                }
            </style>
        `);

        // 标签页切换功能
        document.querySelectorAll('.rank-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有标签的active类
                document.querySelectorAll('.rank-tab').forEach(t => {
                    t.classList.remove('rank-tab-active');
                });
                // 给当前点击的标签添加active类
                tab.classList.add('rank-tab-active');

                // 隐藏所有内容
                document.querySelectorAll('.rank-content').forEach(content => {
                    content.classList.add('hidden');
                });
                // 显示对应的内容并添加动画
                const tabId = tab.getAttribute('data-tab');
                const activeContent = document.getElementById(tabId);
                activeContent.classList.remove('hidden');

                // 为新显示的内容添加淡入动画
                activeContent.classList.add('animate-fadeIn');
                setTimeout(() => {
                    activeContent.classList.remove('animate-fadeIn');
                }, 500);
            });
        });

        // 移动端菜单切换
        document.getElementById('mobile-menu-btn').addEventListener('click', () => {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
            // 为移动端菜单添加动画
            if (!mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('animate-fadeIn');
            }
        });

        // 活跃度图表
        const ctx = document.getElementById('activityChart');
        if (ctx) {
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '解题数',
                        data: [1200, 1900, 3000, 5000, 8000, 12000],
                        borderColor: '#045525',
                        backgroundColor: 'rgba(4, 85, 37, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '竞赛参与',
                        data: [120, 190, 250, 380, 500, 650],
                        borderColor: '#FFD700',
                        backgroundColor: 'rgba(255, 215, 0, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // 页面滚动时导航栏效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });

        // 页面加载完成后执行动画
        document.addEventListener('DOMContentLoaded', function() {
            // 页面主体淡入
            setTimeout(() => {
                document.getElementById('body').classList.add('animate-fadeIn');
            }, 100);

            // 头部导航栏滑入
            setTimeout(() => {
                document.getElementById('header').classList.add('animate-slideInUp');
            }, 200);

            // 页面标题区域滑入
            setTimeout(() => {
                document.getElementById('page-title').classList.add('animate-slideInUp');
            }, 400);

            // 为所有带有data-animation属性的元素添加动画
            const animatedElements = document.querySelectorAll('[data-animation="true"]');
            animatedElements.forEach(element => {
                const delay = element.getAttribute('data-delay') || 0;
                setTimeout(() => {
                    element.classList.add('animate-slideInUp');
                }, 600 + parseInt(delay));
            });

            // 页脚动画
            setTimeout(() => {
                document.getElementById('footer').classList.add('animate-slideInUp');
            }, 2000);
        });
    </script>
</body>
</html>
